<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        body,div,p,h1,h2,h3,h4,h5,h6,ul,li{margin:0;padding:0;list-style:none;}
        ul,ol{list-style:none;}
        input{outline-style: none;padding: 0;}
        .wrap{
            width: 600px;
            height: 400px;
            background-color: lightblue;
            border-radius: 20px;
            margin: 50px auto;
        }
        label[for="file"]{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            text-align: center;
            /* vertical-align: middle; */
            line-height: 100px;
        }
        #file{
            opacity: 0;
        }
        input[type="button"]{
            width: 80px;
            height: 32px;
            margin: 10px 10px;
            background-color: rgba(0, 0, blue, 0.5);
            outline-style: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="form">
            <label for="file">选择文件</label>
            <input type="file" id="file" name="file" accept="*" >
            <br>
            <input type="button" value="上传" onclick="upload(0)">
        </div>
    </div>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script>
        
       var chunkSize = 1024*1024;

        var fileInput = document.querySelector("#file");

        function upload(index){
            let files = fileInput.files;
            if(!files[0]){
                alert("请选择文件")
                return 
            }
            let file = files[0];// file对象
            //获取文件名和扩展名
            let [fname,fext] = file.name.split('.')

            // 分片
            let start = index * chunkSize
            if(start > file.size){
                merge(file.name);
                return;
            }

            let blob = file.slice(start,start + chunkSize)
            let blobName = `${fname}.${index}.${fext}`;
            let blobFile = new File([blob],blobName);

            // 上传文件
            let formData = new FormData()
            formData.append('file',blobFile);
            $.ajax({
                type: 'post',
                url: '/upload',
                data: formData,
                contentType: false,
                processData: false,
                success: function(res){
                    console.log(res);
                    upload(++index);
                }
            })
        }

        // 合并文件路由
        function merge(filename){
            var formData = new FormData()
            formData.append('name',filename)
            $.ajax({
                type: 'post',
                url:"/merge",
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(res){
                    console.log(res);
                }
            })
        }
    </script>
</body>
<html>